<template>
	<view class="register">
		<view style="height: 100rpx;"></view>
		<!-- logo部分 -->
		<view class="logo">
			<image class="logoImg" src="../../static/icon/user.png" mode=""></image>
		</view>
		<!-- logo部分 -->
		<!-- 输入部分 -->
		<view class="userDl">
			<view class="register-fa">
				<input type="text" placeholder="请输入邮箱" v-model="form.email" @blur="emailValue" />
			</view>
			<view class="register-fa">
				<input type="password" placeholder="请输入密码" v-model="form.password1" @blur="password1Value" />
			</view>
			<view class="register-fa">
				<input type="password" placeholder="请确认密码" v-model="form.password2" @blur="password2lValue" />
			</view>
		</view>
		<!-- 输入部分 -->
		<!-- 登录按钮 -->
		<view class="register-button" @tap="ToLogin">
			<button>注册</button>
		</view>
		<!-- 登录按钮 -->
		<!-- 忘记密码 and 注册 -->
		<view class="mmzc">
			<text @tap="ToLogins">已有帐号,去登录</text>
		</view>
		<!-- 忘记密码 and 注册 -->
		<!-- 分割线 -->
		<view class="ordenlu">
			<view class="line"></view>
			<view style="color: gray;">其他登录方式</view>
			<view class="line"></view>
		</view>
		<!-- 分割线 -->
		<!-- 两个快捷登录的按钮 -->
		<view class="kuaijie">
			<view class="kuaijie-item">
				<image class="anniulogo" src="../../static/icon/wx.png"></image>
				<view>微信登录</view>
			</view>
			<view class="kuaijie-item">
				<image class="anniulogo" src="../../static/icon/phone.png"></image>
				<view>手机登录</view>
			</view>
		</view>
		<!-- 两个快捷登录的按钮 -->
	</view>
</template>

<script>
	// 设置vue对象的this
	let _self

	// 邮箱格式正则表达式
	const repx = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$")
	// 密码格式正则表达式
	const patt = /^\w{8,16}$/
	export default {
		data() {
			return {
				form: {
					email: 'admin@qq.com',
					password1: '12345678',
					password2: '12345678'
				}
			}
		},
		onLoad() {
			_self = this
		},
		methods: {
			emailValue() {
				let email = _self.form.email
				// 校验数据
				if (!email.trim()) {
					return uni.showToast({
						title: '邮箱不能为空！',
						icon: 'none'
					})
				} else if (!repx.test(email)) {
					return uni.showToast({
						title: '邮箱格式不正确！',
						icon: 'none'
					})
				}
			},
			password1Value() {
				let password1 = _self.form.password1
				// 校验数据
				if (!password1.trim()) {
					return uni.showToast({
						title: '密码不能为空！',
						icon: 'none'
					})
				} else if (!patt.test(password1)) {
					return uni.showToast({
						title: '密码格式不能小于8！',
						icon: 'none'
					})
				}
			},
			password2lValue() {
				let password1 = _self.form.password1
				let password2 = _self.form.password2
				// 校验数据
				if (!password2.trim()) {
					return uni.showToast({
						title: '密码不能为空！',
						icon: 'none'
					})
				} else if (password1 != password2) {
					return uni.showToast({
						title: '两次输入密码不一致！',
						icon: 'none'
					})
				}
			},
			ToLogin() {
				let email = _self.form.email
				let password1 = _self.form.password1
				let password2 = _self.form.password2
				// 邮箱校验数据
				if (email.length === 0) {
					return uni.showToast({
						title: '邮箱不能为空！',
						icon: 'none'
					})
				} else if (!repx.test(email)) {
					return uni.showToast({
						title: '邮箱格式不正确！',
						icon: 'none'
					})
				}
				// 密码1校验数据
				else if (!password1.trim()) {
					return uni.showToast({
						title: '密码不能为空！',
						icon: 'none'
					})
				} else if (!patt.test(password1)) {
					return uni.showToast({
						title: '密码格式不能小于8！',
						icon: 'none'
					})
				}
				// 密码2校验数据
				else if (!password2.trim()) {
					return uni.showToast({
						title: '密码不能为空！',
						icon: 'none'
					})
				} else if (password1 != password2) {
					return uni.showToast({
						title: '两次输入密码不一致！',
						icon: 'none'
					})
				} else {
					_self.$post(_self.$api.USER_REGISTER, {
						id: '0',
						email: email,
						mpassword: password1,
					}).then(res => {
						if (res.code == 200) {
							console.log(res)
							uni.showToast({
								title: '注册成功！',
								duration: 1000
							});
							setTimeout(function() {
								uni.switchTab({
									url: '../login/login'
								})
							}, 1000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				}
			},
			ToLogins() {
				uni.redirectTo({
					url: '../login/login'
				})
			}
		}
	}
</script>

<style scoped>
	.register {
		height: 100vh;
		width: 100%;
	}

	.logo {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.logo view {
		color: grey;
	}

	.logoImg {
		width: 200rpx;
		height: 200rpx;
	}

	.userDl {
		margin-top: 20rpx;
	}

	input {
		height: 80rpx;
		border: 1rpx solid #DDDDDD;
		border-radius: 50rpx;
		margin-top: 50rpx;
		text-align: center;
	}

	.register-fa {
		padding-left: 40rpx;
		padding-right: 40rpx;
	}

	.register-button {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
	}

	.register-button button {
		width: 650rpx;
		color: white;
		background-color: #33a69e;
		border-radius: 50rpx;
		margin-top: 20rpx;
	}

	.register-button:hover button {
		background-color: #048179;
	}

	.mmzc {
		margin-top: 60rpx;
		color: #868686;
		text-align: center;
	}

	.ordenlu {
		margin-top: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.line {
		height: 1rpx;
		background-color: #DDDDDD;
		flex-grow: 1;
	}

	.kuaijie {
		margin-top: 50rpx;
		display: flex;
		justify-content: space-around;
	}

	.kuaijie-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: gray;
	}

	.kuaijie-item view {
		margin-top: 10rpx;
	}

	.anniulogo {
		width: 100rpx;
		height: 100rpx;
	}
</style>
